<template>
  <div class="select-box">
    <el-radio-group v-model="redioValue" class="">
      <el-radio
        :value="item.value"
        size="large"
        v-for="item in selectDataList"
        :key="item.value"
        @click="handleClick(item.value)"
        ><span class="radio-text">{{ item.label }}</span></el-radio
      >
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { mapLayerEnum } from "@/enums";

let props = withDefaults(
  defineProps<{
    // 标题
    value: string;
  }>(),
  {
    value: mapLayerEnum.RECTIFICATION,
  }
);
let emits = defineEmits(["update:value"]);
const selectDataList = [
  {
    label: "整治建议",
    value: mapLayerEnum.RECTIFICATION,
  },
  {
    label: "问题清单",
    value: mapLayerEnum.ISSUE,
  },
  {
    label: "项目更新",
    value: mapLayerEnum.PROJECT,
  },
];
const handleClick = (value: string) => {
  setTimeout(() => {
    if (value === props.value) {
      // redioValue.value = "";
      // emits("update:value", "");
    } else {
      emits("update:value", value);
    }
  }, 500);
};
const redioValue = ref(mapLayerEnum.RECTIFICATION);
// const redioValue = computed({
//   get: () => {
//     return props.value;
//   },
//   set: (value: string) => {
//     // 如果值是一样的，则要取消
//     if (value === props.value) {
//       emits("update:value", "");
//     } else {
//       emits("update:value", value);
//     }
//   },
// });
</script>
<style lang="scss" scoped>
.select-box {
  padding: 12px 16px;
  border: 1px solid #333;
  background: rgba($color: #000000, $alpha: 0.4);
  position: absolute;
  right: 20px;
  top: 80px;
  z-index: 99;

  .radio-text {
    color: rgb(0, 253, 250);
  }
}
</style>